import React, {Component} from 'react';
import {getFundingDetailsArrayBy, showRequests, approveRequest, finalizeRequest} from "../../eth/interactions";
import CardExampleColored from "../common/CardList";
import {Button} from "semantic-ui-react";
import TableExamplePagination from "../common/RequestList";

class InvestorFundingTab extends Component {
    constructor() {
        super();
        this.state = {
            investorFundingDetailsArray: [],
            selectedFunding: '',
            requestDetailsContainer:[],
        }
    }

    async componentDidMount() {
        try {
            this.mounted = true;
            let investorFundingDetailsArray = await getFundingDetailsArrayBy(3);
            if (!this.mounted) return;
            this.setState({investorFundingDetailsArray});
            console.table(investorFundingDetailsArray);
        } catch (e) {
            console.log(e);
        }

    }

    componentWillUnmount() {
        this.mounted = false;
    }

    onItemClick = (detail) => {
        console.log('xxxxxxxxxxx selectedFunding : ', detail);
        this.setState({selectedFunding: detail});
    }

    onRequestDetalsClick = async () => {
        try {
            let requestDetailsContainer = await showRequests(this.state.selectedFunding.funding);
            this.setState({requestDetailsContainer});
            console.table(requestDetailsContainer);
        } catch (e) {
            console.log(e)
        }
    }

    onApproveClick= async (index) => {
        try {
            console.log('click index :', index);
            await approveRequest(this.state.selectedFunding.funding, index);
        } catch (e) {
            console.log(e)
        }
    }


    render() {
        const {investorFundingDetailsArray, selectedFunding, requestDetailsContainer} = this.state;
        return (
            <div>
                <CardExampleColored details={investorFundingDetailsArray} onItemClick={this.onItemClick}/>
                <br/>
                {
                    selectedFunding && (
                        <div>
                            <Button onClick={this.onRequestDetalsClick}>申请详情</Button>
                            <TableExamplePagination requestDetails={requestDetailsContainer}
                                                    investorCount={selectedFunding.investorCount}
                                                    onApproveClick={this.onApproveClick}
                                                    pageKey={3}
                            />
                        </div>
                    )
                }
            </div>

        );
    }
}

export default InvestorFundingTab;